<template>
    <div class="homePage flex">
        <!-- 导航区域 -->
        <div class="menuVue">
            <div class="menuTop relative" @click="$jump('index')">
                <img src="../assets/menu_logo.png" class="logo absolute_auto">
            </div>
            <el-menu 
                class="el-menu-vertical-demo" 
                :default-active="defaultActive"
                :default-openeds="defaultOpeneds" 
                @select="handleSelect"
                @open="handOpen"
                :unique-opened="true"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-cooperation"></i>
                        <span>AI客服配置</span>
                    </template>
                    <el-menu-item index="wChat">微信</el-menu-item>
                    <el-menu-item index="repository">知识库</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-s-platform"></i>
                        <span>聊天管理</span>
                    </template>
                    <el-menu-item index="chat">聊天会话</el-menu-item>
                    <el-menu-item index="latest">跟进列表</el-menu-item>
                    <!-- <el-menu-item index="mass_texting">群发</el-menu-item> -->
                    <el-menu-item index="timing_message">定时消息</el-menu-item>
                    <!-- <el-menu-item index="prologue">开场白设置</el-menu-item> -->
                    <!-- <el-menu-item index="addFriend">自动加好友</el-menu-item> -->
                    <!-- <el-menu-item index="advanced_setup">高级设置</el-menu-item> -->
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>我的</span>
                    </template>
                    <!-- <el-menu-item index="my_service">我的服务</el-menu-item> -->
                    <el-menu-item index="sub_account">我的子账号</el-menu-item>
                    <el-menu-item index="setup">账号设置</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>

        <!-- 右侧路由区域 -->
        <div class="container">
            <!-- header区域 -->
            <div class="topVue flex_between align_center">
                <div class="flex align_center">
                    <img src="../assets/back.png" class="back" @click="$router.go(-1)" v-if="$route.meta.isBack">
                    <span>{{ $route.meta.title }} > {{ $route.meta.subtitle }}</span>
                </div>

                <!-- 登录状态 -->
                <div class="flex align_center" style="cursor: pointer;">
                    <el-dropdown @command="handleCommand">
                        <el-avatar shape="circle" size="medium" :src="user.avatar"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="1">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

            <!-- 路由占位 -->
            <div class="content">
                <div class="routerVue">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { mapState } from "vuex"
import { toast } from "@/common/tools"
export default {
    data(){
        return{
            defaultOpeneds: ["1"],
            defaultActive: "robot",
        }
    },
    computed: {
        ...mapState({
            user: state => state.user,
        })
    },
    created(){
        this.defaultActive = this.$route.name || "wChat"
    },
    methods: {
        handleSelect(key) {
            if(this.$route.name===key) return
            this.$router.push({
                name: key
            })
        },
        handOpen(key){
            console.log(key)
            // this.defaultActive = key
        },
        handleCommand(command){
            console.log(command)
            switch(command){
                case "1":
                    this.$post("/front/user/logout").then(res=>{
                        if(res.data.code===0) {
                            toast(0, "已退出登录")
                            window.localStorage.removeItem("ai_token")
                            window.localStorage.removeItem("user")
                            this.$router.push({name: "index"})
                            this.$store.state.statusRandom = -1
                        }
                    })
                break
            }
        }
    } 
  }
</script>
  
<style lang="less" scoped>
:deep(.el-submenu__title i) {
    font-size: 16px;
}
.homePage {
    width: 100vw;
    height: 100vh;
    .menuVue {
        width: 200px;
        height: 100vh;
        background: #fff;
        .menuTop {
            width: 200px;
            height: 60px;
            cursor: pointer;
            .logo {
                width: 120px;
                height: 33px;
                cursor: pointer;
            }
        }
    }
    .container {
        width: calc(100vw - 200px);
        height: 100vh;
        .topVue {
            width: calc(100vw - 200px);
            height: 60px;
            background: #fff;
            padding: 0 15px;
            span {
                color: #111;
                font-size: 15px;
                font-weight: 600;
            }
            .back {
                width: 20px;
                height: 20px;
                margin-right: 15px;
                cursor: pointer;
            }
        }
        .content {
            width: calc(100vw - 200px);
            height: calc(100vh - 60px);
            background: #f5f5f5;
            padding: 15px;
            .routerVue {
                width: 100%;
                height: 100%;
                background: #fff;
            }
        }
    }
}

:deep(.el-menu) { 
    border-right: none;
}
</style>
  